<template>
	<view class="viewbox auto d-flex f-column p-top30">
		<text class="color_33 h6" v-if="pageData.goods_name">{{pageData.goods_name}}</text>
		<text class="color_33 size34 m-top20 bold500">{{pageData.chapter_title}}</text>
		<view class="row  a-center m-top20">
			<text class="color_66 h7" v-if="pageData.seconds_detail">时长{{pageData.seconds_detail}}</text>
			<view class="flex-1 d-flex f-column a-end">
				<text class="color_66 size22">进度 {{pageData.percent}}%</text>
				<view class="progor m-top10">
					<view class="schPro" :style="{width:pageData.percent+'%'}"></view>
				</view>
			</view>
		</view>

		<view class="rows m-top26">
			<u-parse :content="pageData.content" :domain="imgUrl"></u-parse>
		</view>

		<view class="row a-center p-top100 p-bot100">
			<view class="flex-1 d-flex f-column a-start color_2f" v-if="pageData.chapter_prev" 
			      @click="Toggle(pageData.chapter_prev.chapter_id)">
				<view class="d-flex a-center" >
					<view class="iconfont icon-zuojiantou ssize26"></view>
					<text class="size22 m-left10">上一章</text>
				</view>
				<view class="listTitle size22 ellipsis m-top10">{{pageData.chapter_prev.chapter_title}}</view>
			</view>
			<view class="flex-1 d-flex f-column a-end color_2f" v-if="pageData.chapter_next" 
			     @click="Toggle(pageData.chapter_next.chapter_id)">
				<view class="d-flex a-center">
					<text class="size22 m-right10">下一章</text>
					<view class="iconfont icon-youjiantou size26"></view>
				</view>
				<view class="listTitle size22 ellipsis m-top10  text-right">{{pageData.chapter_next.chapter_title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				chapter_id:'',
				goods_id:'',
				startTime:0,
				pageData:'',
				all_play_time:0,
			}
		},
		onLoad(opt) {
			if(opt.chapter_id) this.chapter_id = opt.chapter_id;
			if(opt.goods_id) this.goods_id = opt.goods_id;
			this.myClassDetail();
		},
		methods: {
			myClassDetail(){
				this.$http.get({
					url:'/goodsLessonsApi/myClassDetail',
					data:{
						chapter_id:this.chapter_id,
						goods_id:this.goods_id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.all_play_time = result.chapter_play_time;
					this.$BarTitle(result.chapter_title);
					this.pageData = result;
					this.start_T();
				})
			},
			
			Toggle(toggle_id){
				this.end_T(toggle_id);
			},
			
			start_T(){
				this.startTime = new Date();
			},
			end_T(toggle_id){
				const endTime = new Date();
				const current_time = ((endTime - this.startTime) / 1000);
				const chapter_play_time = parseInt(current_time) + parseInt(this.all_play_time);
				this.saveChapterLog(chapter_play_time,toggle_id);
			},
			
			saveChapterLog(chapter_play_time,toggle_id){
				this.$http.post({
					url:'/goodsLessonsApi/saveChapterLog',
					data:{
						chapter_id:this.chapter_id,
						chapter_play_time
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					if(!toggle_id) return;
					this.chapter_id = toggle_id;
					this.myClassDetail();
				})
			},
		},
		
		onUnload(){
			this.end_T();
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.progor {
		width: 160rpx;
		height: 10rpx;
		background: #E4E4E4;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}

	.schPro {
		height: 100%;
		background-color: #FF5255;
		position: absolute;
		top: 0;
		left: 0;
	}

	.color_2f {
		color: #2F7FE2
	}

	.listTitle {
		width: 200rpx;
	}
</style>